<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="../js/vue.js"></script>
  <title>收集表单数据</title>
</head>
<body>
  <div id="root">
    <h2>收集表单数据</h2>
    <hr>
    <!-- 
      <form action="">
        <label for="username">账号：</label>
        <input type="text" id="username">
      </form> -->

    <form action="">
      账号：<input type="text" v-model="userInfo.account"><br><br>
      密码：<input type="text" v-model="userInfo.password"><br><br>
      性别：
      男 <input type="radio" name="sex" v-model="userInfo.sex" value="male"> 
      女 <input type="radio" name="sex" v-model="userInfo.sex" value="female"><br><br>
      爱好：
      战争雷霆 <input type="checkbox" v-model="userInfo.hobby" value="war"> &nbsp;
      LOL     <input type="checkbox" v-model="userInfo.hobby" value="lol"> &nbsp;
      原神    <input type="checkbox" v-model="userInfo.hobby" value="mihoyo"><br><br>
      所在服务器：
      <select name="" id="" v-model="userInfo.server">
        <option value="">请选择你的服务器地址</option>
        <option value=" asia ">亚洲</option>
        <option value=" america ">美洲</option>
        <option value=" europe ">欧洲</option>
      </select><br><br>
      其它信息：
      <textarea name="" id="" v-model="userInfo.other"></textarea><br><br>
      <input type="checkbox" v-model="userInfo.agree"> 阅读并接收<a href="#">用户协议</a><br><br>
      <button type="button" @click="login">登录</button>
    </form>
  </div>
  <script type="text/javascript">
    const x= new Vue({
      el:'#root', 
      data:{
        userInfo:{
          account:'',
          password:'',
          sex:'',
          hobby:[],
          server:'',
          other:'',
          agree:'',
        }
      },
      methods: {
        login() {
          console.log(JSON.stringify(this.userInfo));
        }
      },
    })
  </script>
</body>
</html>